<template>
    <div class="space_warp">
        <Header></Header>
        <div class="content">
            <el-row>
                <el-col :span="24">
                    <div class="content_inner">
                        <div class="current_page clearFix">
                            <span>当前位置：</span>
                            <div>
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                    <el-breadcrumb-item>空间</el-breadcrumb-item>
                                    <el-breadcrumb-item>{{current}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </div>

                        <div class="Tap_option clearFix">
                            <ul class="option_box clearFix">
                                <template v-for="(item,index) in isMechanism">
                                    <li :class="isActive === item.zoneType?'option active':'option'"
                                        :key="item.zoneType" @click="handleActive(item.zoneType)">{{item.name}}</li>
                                    <li class="line" v-if="index !== isMechanism.length - 1" :key="index"></li>
                                </template>
                            </ul>
                            <div class="search">
                                <el-input placeholder="请输入关键词" v-model="search" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="httpZoneList('search')">搜索
                                    </el-button>
                                </el-input>
                            </div>
                        </div>

                        <div class="condition clearFix">
                            <div class="condition_inner" v-if="$route.query.type == 0">
                                <el-form :inline="true" :model="formInline" style="height: 100%;">
                                    <el-form-item label="筛选条件" style="margin-bottom: 0;" v-if="istiaojianShow">
                                        <el-select placeholder="所有阶段" v-model="formInline.phase" size="mini"
                                            @change="handlePhase" :disabled="professional == ''">
                                            <el-option label="所有阶段" value></el-option>
                                            <el-option v-for="item in phaseSelectStage" :key="item.schoolType"
                                                :label="item.name" :value="item.schoolType"></el-option>
                                        </el-select>
                                        <el-select v-if="$route.query.type == 0 && isSubjectShow" placeholder="所有学科"
                                            v-model="formInline.subject" style="margin-left: 10px" size="mini"
                                            @visible-change="handleVisibleChange" @change="httpZoneList" :disabled="professional == ''">
                                            <el-option label="所有学科" value></el-option>
                                            <el-option v-for="item in subjectStage" :key="item.subjectId"
                                                :label="item.subjectName" :value="item.subjectId"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="空间排序" style="margin-bottom: 0;"> 
                                        <el-select placeholder="默认排序" v-model="formInline.trafficVolume" size="mini"
                                            @change="httpZoneList" :disabled="professional == ''">
                                            <el-option label="访问量" value="visitorNum"></el-option>
                                            <el-option v-if="current != '机构空间' " label="粉丝数" value="beanNum"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div class="intotal">共有{{total}}个{{professional}}用户</div>
                        </div>
                        <div class="space_wrap clearFix" v-loading="loading" element-loading-text="数据加载中..."
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                            <div class="space_list" v-for="(item,index) in getZoneList" :key="index">
                                <div class="head_portrait">
                                    <div class="portrait">
                                        <el-avatar :size="60">
                                            <img :src="item.img | pictureUrl" @click="goSpaceOthers(item)" v-if="item.img != 'null'"/>
                                            <img :src="item.sex == '1'?imgList[0].imgUrl:imgList[1].imgUrl" 
                                            @click="goSpaceOthers(item)" v-else/>
                                            <!-- <img :src="'group1/M00/08/6F/wKgBtF6580-AL2MxAAAxHtLMPLw570.jpg' | pictureUrl" 
                                            @click="goSpaceOthers(item)" v-else/> -->
                                        </el-avatar>
                                        <div
                                            v-if="$route.query.type == 0 && userInfo.id && userInfo.role_id !=1000 && userInfo.role_id !=7 && userInfo.role_id !=100011">
                                            <i @click="handleFollow(item)" v-if="item.flag == 1"
                                                class="follow_icon el-icon-success" style="color: #409EFF;"></i>
                                            <i @click="handleFollow(item)" v-else
                                                class="follow_icon el-icon-circle-plus"></i>
                                        </div>
                                    </div>
                                    <div class="follow"
                                        v-if="$route.query.type == 0 && userInfo.id&&userInfo.role_id !=1000&&userInfo.role_id !=7&&userInfo.role_id !=100011">
                                        <span>{{item.flag == 1?'已关注':'关注'}}</span>
                                    </div>
                                </div>
                                <div class="space_detail">
                                    <div class="people" @click="goSpaceOthers(item)">
                                        <!-- 教师  -->
                                        <template v-if="isActive == 8">
                                            <div class="occupation">
                                                <span>{{item.username}}</span>
                                                <span class="shiwei">{{item.rolename}}</span>
                                            </div>
                                            <div class="serving">
                                                <span class="serving_name">{{item.schoolName}}</span>
                                                <span>{{item.subject}}</span>
                                            </div>
                                        </template>

                                        <!-- 学生 -->
                                        <template v-if="isActive == 6">
                                            <div class="occupation">
                                                <span>{{item.username}}</span>
                                                <span class="shiwei">{{item.className}}</span>
                                            </div>
                                            <div class="serving">
                                                <span class="serving_name">{{item.schoolName}}</span>
                                            </div>
                                        </template>

                                        <!-- 家长||班级 -->
                                        <template v-if="isActive == 9||isActive == 1000">
                                            <div class="occupation">
                                                <span>{{item.username}}</span>
                                            </div>
                                            <div class="serving">
                                                <span class="serving_name">{{item.schoolName}}</span>
                                            </div>
                                        </template>

                                        <!-- 学校||机构 -->
                                        <template v-if="isActive == 7||isActive == 100011">
                                            <div class="occupation">
                                                <span>{{item.username}}</span>
                                            </div>
                                            <div class="serving">
                                                <span class="serving_name">{{item.schoolName}}</span>
                                            </div>
                                        </template>

                                        <template v-if="isActive ==null">
                                            <div class="occupation">
                                                <span>{{item.username}}</span>
                                                <span class="shiwei">{{item.className}}</span>
                                            </div>
                                            <div class="serving">
                                                <span class="serving_name">{{item.schoolName}}</span>
                                            </div>
                                        </template>
                                    </div>
                                    <div class="fans_visitor">
                                        <span>访客：{{item.visitorNum}}</span>
                                        <span v-if="current != '机构空间' ">粉丝：{{item.beanNum}}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="empty" v-if="getZoneList.length<=0">
                                <i class="iconfont icon-icon"></i>
                                <label>暂无数据</label>
                            </div>
                        </div>

                        <div class="block" v-if="getZoneList.length>0">
                            <el-pagination background @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page="page"
                                :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import Header from "@c/Header/head";
    import Footer from "@c/Footer/footer";
    export default {
        components: {
            Header,
            Footer
        },
        computed: {
            ...mapState({
                // 分页插件参数统一配置
                paginationParams: state => state.commonModule.paginationParams,
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
            })
        },
        data() {
            return {
                imgList: [{
                        id: '001',
                        imgUrl: require("../../../assets/img/男.png")
                    },
                    {
                        id: '002',
                        imgUrl: require("../../../assets/img/女.png")
                    },
                ],
                istiaojianShow: true,
                loading: true,
                current: null,
                isMechanism: [],
                formInline: {
                    phase: "",
                    subject: "",
                    trafficVolume: "visitorNum"
                },
                search: "",
                typeIdCache: null,
                isActive: 0,
                getZoneList: [],
                total: 0, // 总条数
                page: 1, //当前页
                pageSize: 15, //每页显示条数
                professional: "", //用户类别（教师，学生...）
                phaseSelectStage: [], //阶段下拉框
                subjectStage: [], //学科下拉框
                isSubjectShow: false
            };
        },
        created() {
            this.isActive = this.$route.query.active;
            if (this.isActive == 9) {
                this.istiaojianShow = false
            } else {
                this.istiaojianShow = true
            }
            this.httpZoneList(this.isActive);
            this.httpSelectStage();
        },
        mounted() {
            let _this = this;
            let {
                type
            } = this.$route.query;
            this.current = type == 0 ? "个人空间" : "机构空间";
            if (type == 0) {
                _this.isMechanism = [{
                        id: 1,
                        name: "教师",
                        zoneType: 8
                    },
                    {
                        id: 2,
                        name: "学生",
                        zoneType: 6
                    },
                    {
                        id: 3,
                        name: "家长",
                        zoneType: 9
                    }
                ];
                this.professional = "";
            } else {
                _this.isMechanism = [{
                        id: 1,
                        name: "学校",
                        zoneType: 7
                    },
                    {
                        id: 2,
                        name: "班级",
                        zoneType: 1000
                    },
                    {
                        id: 3,
                        name: "教研",
                        zoneType: 100011
                    }
                ];
                this.professional = "";
            }
        },
        methods: {
            // 去他人空间
            goSpaceOthers(others) {
                this.$store.dispatch('commonModule/checkVisitor', {
                    userId: others.userid
                }).then(res => {
                    if (res.data.code == 200 || this.userInfo.id == others.userid) {
                        this.$store.commit('commonModule/INIT_STUDENTTOSPACE', false);
                        if (others) {
                            if (this.userInfo.id == others.userid) {
                                this.$store.commit('commonModule/INIT_ISMANAGER', true);
                            } else {
                                if (this.userInfo.id && others.userid) {
                                    this.$store.dispatch('visitorAllModule/visitorAdd', {
                                        fromuserid: others.userid,
                                        visitorid: others.userid,
                                        type: 4
                                    })
                                }
                                this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                            // 学校9527 班级1000 教研100011
                            if (others.roleid == 7) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/school/schoolHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 1000) {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/class/classHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            } else if (others.roleid == 100011) {
                                 if(!others.xxdm){
                                    this.$message.warning("所选教研信息有误,无教研编号！")
                                    return
                                }
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/research/researchOther/researchOtherHome",
                                    query: {
                                        others: others
                                    }
                                });
                            } else {
                                this.$store.commit('userModule/INIT_OTHERUSERINFO_DATA', others)
                                this.$router.push({
                                    path: "/otherZone/otherZoneHomePage",
                                    query: {
                                        others: others
                                    }
                                });
                            }
                        }
                    }else {
                        this.$message.warning('没有访问权限!')
                    }
                })
            },
            // 关注||取消关注
            handleFollow(followID) {
                if (followID.flag == 0) {
                    this.$store.dispatch('studentAnsweringModule/addFollow', {
                        id: followID.userid,
                        lenve: 1
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('关注成功')
                            this.getZoneList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 1
                                }
                            })
                        }
                    })
                } else {
                    this.$store.dispatch('studentAnsweringModule/beanremove', {
                        userId: followID.userid
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('取消关注成功')
                            this.getZoneList.map(item => {
                                if (item.userid == followID.userid) {
                                    item.flag = 0
                                }
                            })
                        }
                    })
                }
            },
            // 每页显示条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.httpZoneList();
            },

            //当前页
            handleCurrentChange(val) {
                this.page = val;
                this.httpZoneList();
            },

            /**
             * 空间列表切换
             * @param zoneType ：8教师，6学生，9家长，9527学校，1000班级，100011教研
             */
            handleActive(zoneType) {
                if (zoneType == 8) {
                    this.isSubjectShow = true
                } else {
                    this.isSubjectShow = false
                }
                if (zoneType == 9) {
                    this.istiaojianShow = false
                } else {
                    this.istiaojianShow = true
                }
                if (this.isActive == zoneType) return false;
                this.isActive = zoneType;
                let prof = this.isMechanism.find(item => item.zoneType === zoneType * 1);
                this.loading = true;
                this.professional = prof.name;
                this.page = 1;
                this.pageSize = 15;
                var aryList = [6,8,9,7,1000,100011]
                if(aryList.indexOf(zoneType) != -1){
                    this.httpZoneList(zoneType);
                }else{
                    this.httpZoneList()
                }
            },

            errorHandler() {
                return true;
            },

            // 获取列表数据
            httpZoneList(type, params) {
                //默认查全部
                var typeIds = '6,8,9,7,1000,100011'
                if (this.$route.query.type == 0) {
                    typeIds = '6,8,9'
                } else {
                    typeIds = '7,1000,100011'
                }
                if ((type == 'search' || type == 'visitorNum' || type == undefined
                || type == 'beanNum')) {
                    if(this.typeIdCache != null){
                        typeIds = this.typeIdCache
                    }
                }else{
                    var aryList = [6,8,9,7,1000,100011]
                    if(aryList.indexOf(type) != -1){
                        typeIds = type
                    }else {
                        typeIds = this.typeIdCache
                    }
                }
                this.typeIdCache = typeIds
                this.loading = true;
                this.$store.dispatch("homeModule/homeZoneUserList", {
                        typeId: typeIds || (this.$route.query.type == 1?'7,1000,100011':'6,8,9'),
                        page: this.page,
                        pageSize: this.pageSize,
                        userId: this.userInfo.id,
                        ascType: this.formInline.trafficVolume,
                        keyword: this.search,
                        schoolType: this.formInline.phase,
                        subjectId: this.formInline.subject
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            // 总数
                            this.total = res.data.result.total;
                            // 列表
                            this.getZoneList = res.data.result.list;
                            // 关闭loading
                            this.loading = false;
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                    })
            },

            // 阶段下拉框内容
            httpSelectStage() {
                this.$store.dispatch('homeModule/getSelectStage')
                    .then(res => {
                        if (res.data.code === 200) {
                            this.phaseSelectStage = res.data.result;
                        }
                    })
                    .catch(error => {
                        this.$message.error("获取下拉列表失败");
                    });
            },

            // 阶段change事件
            handlePhase(val) {
                let stage = this.phaseSelectStage.find(item => item.schoolType === val);
                this.httpZoneList();
                if (this.isActive == 8) {
                    this.$store.dispatch('homeModule/getSelectStage', {
                            stageId: stage.stageId
                        })
                        .then(res => {
                            if (res.data.code === 200) {
                                this.subjectStage = res.data.result;
                                if (res.data.result.length > 0) this.isSubjectShow = true;
                                else this.isSubjectShow = false;
                            }
                        })
                        .catch(error => {
                            this.$message.error("获取下拉列表失败");
                        });
                }
            },

            // 科目拉开出现时
            handleVisibleChange(ev) {
                if (ev === true) {
                    if (this.formInline.phase === "") {
                        this.$message({
                            message: "请先选择左边的阶段",
                            type: "warning"
                        });
                        return false;
                    }
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .content {
        box-sizing: border-box;
        padding: 20px 0;
        width: 100%;
        background-color: white;

        .content_inner {
            width: 81%;
            margin: 0 auto;

            .current_page {
                text-align: left;
                font-weight: 400;
                color: #606266;
                font-size: 14px;

                span {
                    float: left;
                }

                &>div {
                    float: left;
                    margin-top: 3px;
                }
            }

            .Tap_option {
                width: 100%;
            }

            .search {
                box-sizing: border-box;
                padding: 10px 0;
                width: 400px;
                float: right;
            }

            .option_box {
                margin-left: 20px;
                list-style-type: none;
                float: left;

                .option {
                    box-sizing: border-box;
                    padding: 5px 10px;
                    float: left;
                    cursor: pointer;
                }

                .line {
                    width: 2px;
                    height: 31px;
                    background-color: #ababab;
                    float: left;
                    margin: 0 10px;
                }

                .option.active {
                    color: white;
                    background: #409eff;
                }
            }

            .condition {
                width: 100%;
                box-sizing: border-box;
                padding: 10px 10px;
                background-color: #99bbff;

                .condition_inner {
                    float: left;
                }

                .intotal {
                    float: right;
                    margin-top: 10px;
                    font-size: 14px;
                    color: #606266;
                }
            }

            .space_wrap {
                width: 100%;
                margin: 10px auto;
                min-height: 400px;
                position: relative;
                text-align: center;

                &>.space_list {
                    width: 18%;
                    float: left;
                    height: 125px;
                    background-color: #f2f6fc;
                    margin-bottom: 10px;
                    margin-left: 10px;
                    display: flex;
                    justify-content: space-between;
                    border-radius: 4px;

                    &>.head_portrait {
                        box-sizing: border-box;
                        padding: 5px;

                        .portrait {
                            img {
                                cursor: pointer;
                            }

                            position: relative;

                            .follow_icon {
                                position: absolute;
                                bottom: -2px;
                                left: 50%;
                                transform: translateX(-50%);
                                margin: auto;
                                color: orange;
                            }
                        }

                        .follow {
                            padding-top: 5px;
                            font-size: 14px;
                            color: #999999;
                        }
                    }

                    &>.space_detail {
                        box-sizing: border-box;
                        padding: 5px 0 5px 5px;
                        width: 165px;

                        .people {
                            height: 64px;
                            font-size: 16px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            box-sizing: border-box;
                            padding: 5px 20px 5px 0;
                            border-bottom: 1px dashed;

                            .occupation,
                            .serving {
                                display: flex;
                                justify-content: space-between;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .shiwei {
                                color: #999;
                            }

                            .serving>.serving_name {
                                display: inline-block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }

                        .fans_visitor {
                            box-sizing: border-box;
                            padding-top: 5px;
                            font-size: 14px;
                            text-align: left;

                            &>span {
                                color: #666;
                                display: block;
                            }
                        }
                    }
                }

                .empty {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    width: 200px;
                    height: 135px;

                    i {
                        font-size: 48px;
                    }

                    label {
                        font-size: 32px;
                        display: block;
                        width: 200px;
                        margin: 0 auto;
                    }
                }
            }

            .block {
                margin-top: 20px;
            }
        }
    }

    .clearFix::after {
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
</style>